import React,{useEffect} from 'react'
import { Descriptions, PageHeader ,Image } from 'antd';
import {connect} from 'react-redux';
import {getArticleContent,getLikeNumber,getCollectNumber} from '../sysRedux/getAppList';


const ArticleDetail = (props) => {
    
    const data = props.location.state;


    useEffect(() => {
        props.dispatch(getArticleContent(props.location.state.content));
        //点赞收藏不通，现在还是content，需要改成id
        props.dispatch(getLikeNumber(props.location.state.id));
        props.dispatch(getCollectNumber(props.location.state.id));
    },[]);

    return (
        <>
            <PageHeader
                className="site-page-header"
                onBack={() => props.history.goBack()}
                subTitle="小贴士文章列表"

            />

            <Descriptions title={data.title} bordered>
                <Descriptions.Item label="时间">{data.date}</Descriptions.Item>
                <Descriptions.Item label="点赞人数">{props.likenum[0]}</Descriptions.Item>
                <Descriptions.Item label="收藏人数">{props.collect[0]}</Descriptions.Item>
                <Descriptions.Item label="图片" span={3}>
                    <Image
                        width={200}
                        src={data.image}
                    />
                </Descriptions.Item>


                <Descriptions.Item label="内容" span={3}>{props.articlecontent.data}</Descriptions.Item>
                
                

            </Descriptions>
        </>
    )
}

const mapStateToProps = (state) => ({
    articlecontent:state.articlecontent,
    likenum:state.likenum,
    collect:state.collect,

})

export default connect(mapStateToProps)(ArticleDetail)
